//react  引入
import React, { useState } from "react";
import { NavLink, Redirect } from "react-router-dom";
import routes from "../../router";
import { renderRoutes } from "react-router-config";

//link : https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

//第三方样式引入
import { Layout, Menu, Breadcrumb, Image, Button, Avatar, Card } from "antd";
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
  AlignLeftOutlined,
} from "@ant-design/icons";

//自己样式引入

import "./LeftMenu.css";

//页面组件
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

function LeftMenu() {
  const [sel, setSel] = useState(true);
  console.log(sel);
  const menuChange = (e) => {
    setSel(!sel);
  };

  // const styleChange=(v)=>{
  //   console.log(v)
  // }

  return (
    <div id='menu'>
      <Layout>
        {/* 头部组件 */}
        <Header className='header'>
          <div className='logo' />
          <Menu theme='light' mode='horizontal' defaultSelectedKeys={["2"]}>
            <Menu.Item key='1'>
              <Image
                width={100}
                height={65}
                src='https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
              />
            </Menu.Item>
            <Menu.Item key='2'>
              <Button
                onClick={menuChange}
                type='primary'
                icon={<AlignLeftOutlined />}
              />
            </Menu.Item>

            <Menu.Item key='4' id='menuitem4'>
              你好 ， testUser &nbsp;
              <Avatar size={50} icon={<UserOutlined />} />
            </Menu.Item>
          </Menu>
        </Header>

        <Layout>
          {/* 左侧兰菜单 */}
          <Sider
            width={sel === true ? "200" : "63"}
            className='site-layout-background'
          >
            <Menu
              expandIcon={sel === true ? "" : " "}
              mode='inline'
              defaultSelectedKeys={["1"]}
              defaultOpenKeys={["sub1"]}
              style={{ height: "100%", borderRight: 0 }}
            >
              <SubMenu key='sub1' icon={<UserOutlined />} title='体检商品管理'>
                <Menu.Item key='1'>
                  <NavLink to='/'>体检套餐管理</NavLink>
                </Menu.Item>

                <Menu.Item key='2'>
                  <NavLink to='/management'>体检项管理</NavLink>
                </Menu.Item>
              </SubMenu>
              <SubMenu
                key='sub2'
                icon={<LaptopOutlined />}
                title='体检信息管理'
              >
                <Menu.Item key='5'>
                  <NavLink to='/informationService'>预约信息查询</NavLink>
                </Menu.Item>

                <Menu.Item key='6'>
                  <NavLink to='/physicalExamination'>体检机构管理 </NavLink>
                </Menu.Item>

                <Menu.Item key='7'>
                  <NavLink to='/reportMessage'>体检报告信息 </NavLink>
                </Menu.Item>
              </SubMenu>
              <SubMenu
                key='sub3'
                icon={<NotificationOutlined />}
                title='体检指标管理'
              >
                <Menu.Item key='9'>
                  {" "}
                  <NavLink to='/indexManagement'>标准指标管理 </NavLink>
                </Menu.Item>

                <Menu.Item key='10'>
                  <NavLink to='/organizational'>机构指标管理</NavLink>
                </Menu.Item>
              </SubMenu>
              {/* <Redirect to="/" /> */}

              {/* <Menu.Item key="11" id="stylebtn">
                <Switch onClick={styleChange} id="stylesw" checkedChildren="明" unCheckedChildren="暗" defaultChecked />
                </Menu.Item> */}
            </Menu>
          </Sider>

          <Layout style={{ padding: "20px" }} className='Breadcrumb_box'>
            {/* 面包屑 */}
            <Breadcrumb>
              <Breadcrumb.Item>首页</Breadcrumb.Item>
              <Breadcrumb.Item>
                <a href='/#'>体检商品管理</a>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                <a href='/#'>体检套餐管理</a>
                {/* <a href='/#'>Application Center</a> */}
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                {/* <a href='/#'>Application List</a> */}
              </Breadcrumb.Item>
            </Breadcrumb>

            <Content
              className='site-layout-background'
              style={{
                padding: 0,
                margin: 0,
                minHeight: 280,
              }}
            >
              {/* 右边内容框架 */}
              <div className='site-card-border-less-wrapper box'>
                <Card className='Card_box' bordered={false}>
                  {renderRoutes(routes)}

                  {/* <Footer></Footer> */}
                </Card>
              </div>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
}

export default LeftMenu;
